import React, { Fragment } from 'react'
import {
  View,
  StyleSheet,
  Text,
  ScrollView
} from 'react-native'
import { ScaleT, ScaleS } from 'src/utils/ScreenUtil'
import BasePage from 'src/pageP/base/base-page/index'
import CustomButton from 'src/components/button/CustomButton'
import { companyWelfareTree, updateCompanyInfo } from 'src/utils/RequestAPI'
import { CommonToast } from '@utils/ToastUtil'
import { ONE_PIXEL } from '@/utils/ScreenUtil'
import NavigationUtil from 'src/utils/NavigationUtil'

/* redux */
import { connect } from 'react-redux'
import CustomImage from 'src/components/image/CustomImage'
@connect(
  ({ userinfo, BMineCenterStore }) => ({
    userinfo,
    BMineCenterStore
  })
)
class CompanyWelfare extends BasePage {
  state = {
    header: {},
    ckb: -9,
    list: [],
    welfareItemList: []
  }

  onClick = ({ welfareItem }) => {
    let { welfareItemList } = this.state
    const welfareList = (welfareItemList || [{}]).filter((e) => e.id === welfareItem.id)
    if (welfareList.length > 0) {
      welfareItemList = (welfareItemList || [{}]).filter((e) => e.id !== welfareItem.id)
    } else {
      welfareItemList.push(welfareItem)
    }
    this.setState({
      welfareItemList
    })
  }

  Preservation = () => {
    const { welfareItemList } = this.state

    const list = []
    welfareItemList.filter((e) => {
      const item = []
      item.push(e.id, e.name, e.father)
      list.push(item)
    })
    updateCompanyInfo({ params: { benefits: JSON.stringify(list), companyId: this.props.navigation.state.params.companyId } }).then((data) => {
      if (data.code === 200) {
        CommonToast('保存成功')
        this.jumpFn()
        this.props.navigation.state.params.getMyCompanyBaseInfo()
      }
    })
  }

  childRender() {
    const { ckb, list, welfareItemList } = this.state
    return (
      <View style={styles.container}>
        <ScrollView >
          <Text style={styles.businessIndustry}>公司福利</Text>
          <Text style={styles.headerText}>*选择公司提供福利信息，以吸引更多求职者</Text>
          <ScrollView showsHorizontalScrollIndicator={false} horizontal={true} contentContainerStyle={styles.welfareItemList}>
            {
              (welfareItemList || []).map((item, index) => {
                return <View style={styles.headView} key={index}>
                  <CustomButton style={[styles.bodyViewItem, styles.backgroundYellow, { height: ScaleS(34), marginRight: ScaleS(28) }]} >
                    <Text style={[styles.bodyViewItemText, styles.colorYellow]}>{item.name}</Text>
                  </CustomButton>
                  <CustomButton style={styles.deleteIcon} onPress={this.onClick} params={{ welfareItem: item }}>
                    <CustomImage style={{ resizeMode: 'cover' }} source={require('@/imgC/userinfo/close-black.png')} />
                  </CustomButton>
                </View>
              })
            }
          </ScrollView>
          <View style={styles.bodyView}>
            {
              (list || []).map((item, index) => {
                return (<View key={index} style={styles.welfareList}>
                  <Text style={styles.title}>
                    {item.name}
                  </Text>
                  <View style={styles.companyWelfare}>
                    {
                      (item || []).companyWelfare.map((welfare, index) => {
                        const data = (welfareItemList || [{}]).filter((e) => e.id == welfare.id)
                        return <CustomButton key={index} onPress={this.onClick} params={{ welfareItem: { ...welfare, father: item.id } }} style={[styles.bodyViewItem, (data || []).length > 0 && styles.backgroundYellow]} >
                          <Text style={[styles.bodyViewItemText, (data || []).length > 0 && styles.colorYellow]}>{welfare.name}</Text>
                        </CustomButton>
                      })
                    }
                  </View>
                </View>)
              })
            }
          </View>
        </ScrollView>
        <View style={styles.preservationButtonView}>
          <CustomButton style={styles.preservationButton} onPress={this.Preservation}>
            <Text style={styles.preservationText}>保存</Text>
          </CustomButton>
        </View>

      </View>
    )
  }

  componentDidMount() {
    const { navigation: { state: { params = {} } } } = this.props
    if (params.welfareItemList) {
      const list = JSON.parse(params.welfareItemList)
      const welfareList = []
      list.map((item) => {
        welfareList.push({ id: item[0], name: item[1], father: item[2] })
      })
      this.setState({
        welfareItemList: welfareList
      })
    }
    companyWelfareTree().then((data) => {
      this.setState({
        list: data.data
      })
    })
  }

  prewClick = () => {
    console.log('prewClick')
  }

  jumpFn = () => {
    NavigationUtil.goBack()
  }
}

export default CompanyWelfare

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FFFFFF'
    // position: 'relative'
  },
  title: {
    fontWeight: '400',
    marginLeft: ScaleS(20),
    fontSize: ScaleT(18),
    marginBottom: ScaleS(20)
  },
  colorYellow: {
    color: '#FFC200FF'
  },
  backgroundYellow: {
    borderColor: '#FFC200FF'
  },
  businessIndustry: {
    fontWeight: '500',
    marginLeft: ScaleS(20),
    fontSize: ScaleT(27)
  },
  headerText: {
    marginLeft: ScaleS(20),
    marginTop: ScaleS(18),
    fontSize: ScaleT(14),
    color: '#999999FF'
  },
  bodyView: {

    marginBottom: ScaleS(106)
  },
  preservationButton: {
    backgroundColor: '#000',
    height: ScaleS(50),
    marginLeft: ScaleS(32),
    marginRight: ScaleS(20),
    marginBottom: ScaleS(20),
    borderRadius: ScaleS(5),
    justifyContent: 'center',
    alignItems: 'center',
    width: ScaleS(312)
  },
  preservationText: {
    color: '#fff'
  },
  bodyViewItem: {
    width: ScaleS(94),
    height: ScaleS(42),
    marginLeft: ScaleS(20),
    borderColor: '#CCCCCCFF',
    borderStyle: 'solid',
    borderRadius: ScaleS(5),
    borderWidth: ONE_PIXEL,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: ScaleS(20),
    position: 'relative'
  },
  welfareItemList: {
    minWidth: ScaleS(600),
    borderColor: '#999',
    paddingBottom: ScaleS(59),
    borderBottomWidth: ONE_PIXEL,
    borderStyle: 'solid',
    marginTop: ScaleS(27),
    marginBottom: ScaleS(30),
    height: ScaleS(42)
  },
  welfareList: {

  },
  deleteIcon: {
    backgroundColor: '#000',
    width: ScaleS(15),
    height: ScaleS(15),
    borderRadius: ScaleS(7),
    position: 'absolute',
    top: ScaleS(0),
    right: ScaleS(0),
    justifyContent: 'center',
    alignItems: 'center'
  },
  deleteText: {
    color: '#fff',
    fontSize: ScaleT(12)
  },
  companyWelfare: {
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  preservationButtonView: {
    position: 'absolute',
    bottom: ScaleS(0),
    paddingTop: ScaleS(10),
    backgroundColor: '#fff'
  },
  headView: {
    width: ScaleS(120),
    height: ScaleS(60),
    justifyContent: 'flex-end',
    alignItems: 'flex-start'
  }
})
